<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>dashbord1</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../../vendors/bootstrap/css/bootstrap.min.css">
  <style>
     html {
       box-sizing: border-box
     }
     body {
       background-color: #ecf0f5;
     }
     ul {
       margin: 0;
       padding: 0;
       list-style: none;
     }
     ul li{
       margin: 0;
       padding: 0;
       list-style: none;
     }
    .m-box {
      min-height: 90px;
      background: #fff;
      width: 100%;
      box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
      border-radius: 2px;
      margin-bottom: 15px;
     
    }

    .m-box-icon {
        border-top-left-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 2px;
        display: block;
        float: left;
        height: 90px;
        width: 90px;
        text-align: center;
        font-size: 45px;
        line-height: 90px;
        background: rgba(0,0,0,0.2);
    }
    .m-box-icon .glyphicon {
      color: #fff;
    } 
    .m-box-content {
      padding: 5px 10px;
      margin-left: 90px;
    }
    .m-progress-description, .m-box-text {
      display: block;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .m-progress-description a {
      float: right
    }
    .m-box-number {
      display: block;
      font-weight: bold;
      font-size: 18px;
    }
    .m-box .progress {
        background: rgba(0,0,0,0.2);
        margin: 5px 0;
        height: 2px;
    }
    #m-charts {
      height: 406px;
      width: 100%;
      border: 1px solid #5cb85c;
      margin-bottom: 15px;
      padding: 30px 10px 20px 10px;
    }
    .m-explain {
       border: 1px solid #5bc0de;
       padding: 15px;
       box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    }
    .m-explain li{
      margin-bottom: 10px;
    }
    .clear:after {
      content: '';
      display: table;
      clear: both;
    }
    .m-bg-primary {
      background-color: #337ab7;
    }
    .m-bg-success {
      background-color: #5cb85c;
    }
    .m-bg-info {
      background-color: #5bc0de;
    }
    .m-bg-danger {
      background-color: #d9534f;
    }
    .m-bg-warning {
      background-color: #f0ad4e;
    }
  
  </style>
</head>
<body>

  <div class="container-fluid">
    <br>
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="m-box">
            <span class="m-box-icon m-bg-primary"><i class="glyphicon glyphicon-bold"></i></span>
            <div class="m-box-content">
              <span class="m-box-number">bootstrap Demo</span>
              <span class="m-box-text">完成数量3个</span>
              
            </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="m-box">
            <span class="m-box-icon m-bg-success"><i class="glyphicon glyphicon-italic"></i></span>
            <div class="m-box-content">
               <span class="m-box-number">layui Demo</span>
              <span class="m-box-text">完成数量3个</span>
             
            </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="m-box">
            <span class="m-box-icon m-bg-info"><i class="glyphicon glyphicon-font"></i></span>
            <div class="m-box-content">
              <span class="m-box-number">angularJS Demo</span>
              <span class="m-box-text">完成数量1个</span>
              
            </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="m-box">
            <span class="m-box-icon m-bg-danger"><i class="glyphicon glyphicon-fire"></i></span>
            <div class="m-box-content">
              <span class="m-box-number">native Demo</span>
              <span class="m-box-text">完成数量18个</span>
              
            </div>
        </div> 
      </div>

    </div>
    <div class="row">

      <div class="col-md-8 col-sm-12">
        <div id="m-charts">
          
        </div>
      </div>

      <div class="col-md-4 col-sm-12">
        <div class="m-box m-bg-danger">
          <span class="m-box-icon"><i class="glyphicon glyphicon-home"></i></span>
          <div class="m-box-content">
            <span class="m-box-number">node-blog</span>
            <span class="m-box-text">node mysql ejs</span>
  
            <div class="progress">
              <div class="progress-bar" style="width: 50%"></div>
            </div>
            <span class="m-progress-description clear">
              50% node完成度 &emsp;&emsp;<a href="">查看项目</a>
            </span>
          </div> 
        </div>
        <div class="m-box m-bg-success">
          <span class="m-box-icon"><i class="glyphicon glyphicon-signal"></i></span>
          <div class="m-box-content">
            <span class="m-box-number">node-blog</span>
            <span class="m-box-text">node mysql ejs</span>
  
            <div class="progress">
              <div class="progress-bar" style="width: 90%"></div>
            </div>
            <span class="m-progress-description clear">
              90% node完成度 &emsp;&emsp;<a href="">查看项目</a>
            </span>
          </div> 
        </div>
        <div class="m-box m-bg-info">
          <span class="m-box-icon"><i class="glyphicon glyphicon-headphones"></i></span>
          <div class="m-box-content">
            <span class="m-box-number">vue-ui-pro</span>
            <span class="m-box-text">node mysql ejs</span>
  
            <div class="progress">
              <div class="progress-bar" style="width: 50%"></div>
            </div>
            <span class="m-progress-description clear">
              50% node完成度 &emsp;&emsp;<a href="">查看项目</a>
            </span>
          </div> 
        </div>
        <div class="m-box m-bg-warning">
          <span class="m-box-icon"><i class="glyphicon glyphicon-leaf"></i></span>
          <div class="m-box-content">
            <span class="m-box-number">node-blog</span>
            <span class="m-box-text">node mysql ejs</span>
  
            <div class="progress">
              <div class="progress-bar" style="width: 50%"></div>
            </div>
            <span class="m-progress-description clear">
              50% node完成度 &emsp;&emsp;<a href="" style="text-align: right">查看项目</a>
            </span>
          </div> 
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
          <ul class="m-explain">  
            <li>说明：</li>
            <li>
                1、系统由adminlte更改而来
                <a href="https://github.com/ColorlibHQ/AdminLTE">https://github.com/ColorlibHQ/AdminLTE</a>。
            </li>
            <li>2、加入iframe和路由遍历功能，模仿锚点进行页面跳转。</li>
            <li>3、重构左侧菜单树功能，优化展示功能，添加面包屑导航。</li>
            <li>4、重构js代码，规整js代码结构，增加代码可读性，简化css。</li>
            <li>5、项目主要用于规整在过去项目开发中的经典案例，以及文档的编写，面试题的总结。</li>
          </ul>
      </div>
    </div>
    <br>
    <br>
    <br>
  </div>

  <script src="../../vendors/charts/echarts.min.js"></script>
  <script>
    var dom = document.getElementById("m-charts");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title : {
            text: '未来一周气温变化',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['最高气温','最低气温']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高气温',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'最低气温',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
                    
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
  </script>
</body>
</html>
